<template>
  <view>
    <!-- 顶部导航 -->
    <!-- 		<fa-navbar title="购物车" :border-bottom="false"></fa-navbar>
 -->
    <view class="" v-if="list.length!=0">
      <view class="u-flex u-row-between cart-bar u-p-30">
        <view class="">共 {{ list.length }} 件商品</view>

        <view class="" @click="is_edit = !is_edit">{{ is_edit ? '取消' : '编辑' }}</view>

      </view>
      <view class="goods-cart bg-white">
        <u-checkbox-group @change="checkboxGroupChange">
          <view class="" style="width: 100vw;">
            <u-swipe-action :show="item.show" :index="index" v-for="(item, index) in list" :key="index" @click="click" @open="open" :options="options">
              <view class="u-flex u-row-between u-p-30 u-border-bottom">
                <u-checkbox :active-color="theme.bgColor" v-model="item.checked" :name="item.id"></u-checkbox>
                <view class="" @click="goPage('/pages/goods/detail?id=' + item.goods_id)">
                  <image :src="(item.sku && item.sku.image) || item.goods.image" mode="aspectFill"></image>
                </view>
                <view class="right u-flex-1">
                  <view class="u-line-1 title-sku" @click="goPage('/pages/goods/detail?id=' + item.goods_id)">{{ item.goods.title }}</view>
                  <view class="u-line-1 title-sku u-font-24 u-tips-color" v-if="item.sku">{{ item.sku_attr }}</view>
                  <view class="u-flex u-row-between u-m-t-15">
                    <view class="price">￥{{ (item.sku && item.sku.price) || item.goods.price }}</view>
                    <view class="">
                      <u-number-box v-model="item.cart_nums" :min="1" :index="index" @blur="setCartNum" @minus="setCartNum" @plus="setCartNum"></u-number-box>
                    </view>
                  </view>
                </view>
              </view>
            </u-swipe-action>
          </view>
        </u-checkbox-group>
      </view>
    </view>
    <view class="page-box" v-else>
      <view>
        <view class="u-flex u-row-center loading" v-if="is_loading"><u-loading mode="flower" size="80"></u-loading></view>
        <view v-else class="centre">
          <image src="https://huboshizb.bigchun.com/uploads/20220912/f621e9427251a15cc0e30e3e0f36879f.png" mode=""></image>
          <view class="explain">
            您的购物车空空如也~
            <view class="tips">快去看看有哪些想买的</view>
          </view>
          <view class="btn" @click="goPage('/pages/goods/goods')">随便逛逛</view>
        </view>
      </view>
    </view>
    <u-gap height="120" bg-color="#f4f6f9"></u-gap>
    <!-- 底部导航条 -->
    <view class="footer-bar u-flex u-row-between u-border-top" v-if="list.length!=0">
      <view class="u-flex-1">
        <label class="radio" @click="radioVal = !radioVal">
          <radio style="transform:scale(0.9)" :color="theme.bgColor" value="1" :checked="radioVal" />
          全选
        </label>
      </view>

      <view class="u-flex-1 u-text-right price u-font-30" style="display: flex;flex: inherit;">
        <view style="color: #999999;">合计 </view>￥{{ totalPrice }}
      </view>
      <view class="u-m-l-20">
        <u-button v-if="is_edit" type="primary" hover-class="none" size="medium" :custom-style="{ width: '220rpx', backgroundColor: theme.bgColor, color: theme.color }" shape="circle" @click="dels">
          删除
        </u-button>
        <u-button v-else size="medium" type="primary" hover-class="none" :custom-style="{ width: '220rpx', backgroundColor: theme.bgColor, color: theme.color }" shape="circle" @click="goSettle">
          立即结算
        </u-button>
      </view>
    </view>
    <!-- 底部导航 -->
    <!-- 	<fa-tabbar></fa-tabbar> -->
  </view>
</template>

<script>
export default {
  onShow() {
    if (!this.first || this.vuex_token) {
      console.log("this.vuex_token");
      this.getCartIndex();
    } else {
      this.is_loading = false;
    }
    this.first = true;
    this.radioVal = false
  },
  onUnload() {
    this.$u.vuex('vuex_cart', this.cart_ids);
  },
  computed: {
    totalPrice() {
      let amount = this.list.reduce(function(total, item) {
        if (item.checked) {
          let price = item.sku ? item.sku.price : item.goods.price;
          return total + parseInt(item.cart_nums) * parseFloat(price);
        } else {
          return total;
        }
      }, 0);
      return amount.toFixed(2);
    },
    // isTabbarPath() {
    // 	let pages = getCurrentPages();
    // 	let route = pages[pages.length - 1].route;
    // 	return this.vuex_config.tabbar.list.some(item => {
    // 		return (item.path.substr(0, 1) == '/' && item.path == '/' + route) || item.path == route;
    // 	});
    // }
  },
  watch: {
    radioVal(newValue, oldValue) {
      //全选状态，数据未全选
      if (newValue && this.cart_ids.length != this.list.length) {
        let arr = [];
        this.list.forEach((item, index) => {
          arr.push(item.id);
          this.$set(this.list[index], 'checked', true);
        });
        this.cart_ids = arr;
      } else if (!newValue && this.cart_ids.length == this.list.length) {
        this.list.forEach((item, index) => {
          this.$set(this.list[index], 'checked', false);
        });
        this.cart_ids = [];
      }
    }
  },
  data() {
    return {
      first: false,
      is_edit: false,
      radioVal: false,
      is_loading: false,
      cart_ids: [], //选中的
      list: [],
      options: [{
        text: '移除',
        style: {
          backgroundColor: '#dd524d'
        }
      }]
    };
  },
  methods: {
    setCartNum(e) {
      let {
        index,
        value
      } = e;
      this.$api.setCartNums({
        id: this.list[index].id,
        nums: value
      }).then(res => {
        if (!res.code) {
          setTimeout(() => {
            this.$u.toast(res.msg);
            this.$set(this.list[index], 'cart_nums', this.list[index].nums);
          }, 100); //数量复原
        } else {
          this.$set(this.list[index], 'nums', this.list[index].cart_nums); //数量替换
        }
        //未选中默认选中
        if (!this.list[index].checked) {
          this.cart_ids.push(this.list[index].id);
          this.radioVal = this.cart_ids.length == this.list.length;
          this.$set(this.list[index], 'checked', true);
        }
      });
    },
    checkboxGroupChange(e) {
      this.radioVal = e.length == this.list.length;
      this.cart_ids = e;
    },
    click(index) {
      this.$api.delCart({
        id: this.list[index].id
      }).then(res => {
        this.$u.toast(res.msg);
        if (res.code) {
          this.list.splice(index, 1);
        }
      });
    },
    // 如果打开一个的时候，不需要关闭其他，则无需实现本方法
    open(index) {
      // 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
      // 原本为'false'，再次设置为'false'会无效
      this.list[index].show = true;
      this.list.map((val, idx) => {
        if (index != idx) this.list[idx].show = false;
      });
    },
    //删除购物车
    dels() {
      if (!this.cart_ids.length) {
        this.$u.toast('请选择需删除的商品');
        return;
      }
      this.$api.delCart({
        id: this.cart_ids.join(',')
      }).then(res => {
        this.$u.toast(res.msg);
        if (res.code) {
          this.getCartIndex();
        }
      });
    },
    getCartIndex() {
      this.$api.getCartIndex().then(res => {
        if (res.code) {
          console.log("getCartIndex", res)
          res.data.map(item => {
            item.checked = this.vuex_cart.includes(item.id);
            item.show = false;
            item.cart_nums = item.nums;
            if (item.checked) {
              this.cart_ids.push(item.id)
            }
          });
          this.list = res.data;
        }
        this.is_loading = false;
        let len = this.list.length;
        this.radioVal = len > 0 && this.cart_ids.length == len;
        console.log("this.list", this.list)
      });
    },
    goSettle() {
      if (!this.cart_ids.length) {
        this.$u.toast('请选择结算商品');
        return;
      }
      this.goPage('/pages/goods/order?id=' + this.cart_ids.join(','));
    }
  }
};
</script>

<style lang="scss">
page {
  background-color: #f4f6f9;
}
</style>
<style lang="scss" scoped>
.footer-bar {
  position: absolute;
  left: 0;
  bottom: 0px;
  width: 100%;
  height: 66px;
  background-color: #ffffff;
  padding: 0 16px;
  z-index: 9999;
  border-bottom: 1px solid #eeeeee;
}

.cart-bar {
  background-color: #f4f6f9;
}

.goods-cart {
  image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 5rpx;
  }

  .right {
    padding: 0 30rpx;
    height: 150rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .title-sku {
      width: 450rpx;
    }
  }
}

.page-box {
  .loading {
    padding-top: 30vh;
  }
}

.centre {
  text-align: center;
  margin: 200rpx auto;
  font-size: 32rpx;

  image {
    width: 400rpx;
    height: 400rpx;
    border-radius: 50%;
    margin-bottom: 20rpx;
  }

  .tips {
    font-size: 24rpx;
    color: #999999;
    margin-top: 20rpx;
  }

  .btn {
    margin: 80rpx auto;
    width: 200rpx;
    border-radius: 32rpx;
    line-height: 64rpx;
    color: #ffffff;
    font-size: 26rpx;
    background: #de2415;
  }
}
</style>
